<template>
  <div class="bg_teng">
    <ul class="wanweizoushi_ul">
      <!-- 固定的 -->
      <li class="meiqi_li">
        <div class="meiqi_li_left">期数</div>
        <ul class="shuzhi_ul">
          <li class="shuzhi_li" v-for="(item,index) in periodsball" :key="index">{{item.ball}}</li>
        </ul>
      </li>

      <!--万位循环-->
      <li class="meiqi_li" v-for="(val,iteme,index) in info" :key="index">
        <div class="meiqi_li_left meiqi_li_left2">{{getType(iteme)}}</div>
        <ul class="shuzhi_ul">
       
            <li v-for="( item, idx) in 10" :key="idx" :class="idx === val['num'] ? 'shuzhi_li red':'shuzhi_li'" >
             <b> {{ `${ idx === val['num'] ? val['num'] : val[idx] }` }}</b> 
            </li>
        </ul>
      </li>
    </ul>
    <!-- 加载更多 start -->
    <div class="load-more mr-bottom" v-if="page<page_count" @click="loadMore">点击加载更多</div>
    <div class="bg_gray" v-else>
      <div class="load-more mr-bottom">没有更多了</div>
    </div>
    <!-- 加载更多 end -->
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      page: 1,
      page_count: "",
      periodsball: [
        {
          id: "0",
          ball: 0
        },
        {
          id: "1",
          ball: 1
        },
        {
          id: "2",
          ball: 2
        },
        {
          id: "3",
          ball: 3
        },
        {
          id: "4",
          ball: 4
        },
        {
          id: "5",
          ball: 5
        },
        {
          id: "6",
          ball: 6
        },
        {
          id: "7",
          ball: 7
        },
        {
          id: "8",
          ball: 8
        },
        {
          id: "9",
          ball: 9
        }
      ] //一共九期
    };
  },
  // 渲染之前
  created() {

  },
  methods: {
  	//中奖对应位置
  	
    getType(iteme) {
      const type = {
        avg_missing: "平均遗漏",
        count: "出现次数",
         onebyone: "最大连出",
        max_missing: "最大遗漏"
      }
      return type[iteme] ||iteme
    },
    // 请求加载更多
    loadMore: function() {
      this.page += 1;
      this.getDrawPrize({
        current_page: this.page //请求页数
      })
      this.http.get("/api/chart/data")
        .then(res => {
          console.log(ret.info);
          this.code_result = this.code_result.concat(ret.data.info); //将请求回来的数据和上一次进行组合
        })
    }
  }
};
</script>

<style>
.shuzhi_ul li.red b{background: #d31d17;border-radius:50%;color: #fff}
.meiqi_li .shuzhi_ul .shuzhi_li b{padding: 0.2rem 0 !important;}
.bg_teng {
  background: #f2f2f2;
  height: 100vh;
}
.load-more {
  margin: 0.3rem auto;
  text-align: center;
  width: 2.1rem;
  height: 0.7rem;
  line-height: 0.7rem;
  background-color: #d31d17;
  border-radius: 0.1rem;
  color: #ffffff;
  font-size: 0.24rem;
}
.bg_gray {
  background-color: #f2f2f2;
  padding: 0.3rem;
}
</style>